<template>
  <div class="sendAnswer">
    <el-dialog title="上传答复文件" center @close = 'sendAnswerClose' :visible.sync="isShow" class="sendAnswer">
      <template v-if="answerData">
        <template v-if="answerData.operations && answerData.operations.length">
          <el-timeline class="messageList">
            <el-timeline-item
              v-for="(item, index) in answerData.operations"
              :key="index"
              :timestamp="item.created_at"
            >
              <el-card class="messagebox">
                <Tooltip content="点我回复" class="fr">
                  <i class="el-icon-chat-dot-round ml5" @click="showTextarea(item, index)"></i>
                </Tooltip>
                <div class="agent_item clearfloat" v-if="item.role_id == '2'">
                  <span class="item_user fr">代理人</span>
                  <span class="item_time fr">{{item.created_at}}</span>
                  <div class="item_message messageBackground_r fr">
                    <span>{{item.operation_record}}</span>
                  </div>
                </div>
                <div v-else class="item">
                  <span class="item_time">{{item.created_at}}</span>
                  <span class="item_user">发明人</span>
                  <div class="item_message messageBackground_l">
                    <span>{{item.operation_record}}</span>
                  </div>
                </div>
                <div v-for="(agent, index2) in item.reply_message" :key="index2">
                  <div class="agent_item clearfloat" v-if="agent.role_id == '2'">
                    <span class="item_user fr">代理人</span>
                    <span class="item_time fr">{{agent.created_at}}</span>
                    <div class="item_message messageBackground_r fr">
                      <span>{{agent.operation_record}}</span>
                    </div>
                  </div>
                  <div v-else class="item">
                    <span class="item_time">{{agent.created_at}}</span>
                    <span class="item_user">发明人</span>
                    <div class="item_message messageBackground_l">
                      <span>{{agent.operation_record}}</span>
                    </div>
                  </div>
                </div>
                <div v-if="item.show_input" class="clearfloat mt20">
                  <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="replyMessage"></el-input>
                  <el-button class="fr mt10" type="primary" @click="submit(item)">发送</el-button>
                  <!-- <el-button class="fr mt10 mr10" @click="resets ">重置</el-button> -->
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </template>
      </template>
      <el-upload
				class="upload"
				:action="iploadULR"
				:on-remove="handleRemove"
				:on-change="handleChange"
				:http-request="uploadSectionFile"
				multiple
				:auto-upload="true"
				:limit="1"
				:file-list="fileList">
				<el-button size="small" type="success">{{`选择${setBtnText}文件`}}</el-button>
				<div slot="tip" class="el-upload__tip">最多只能上传一个文件,如果有多个文件,请将文件夹压缩后上传</div>

			</el-upload>
      <el-button size="small" type="primary"  :loading="sendAnswerLoading" @click="submitAnswerFile" class='btn-send' v-no-more-click:3000>{{`发送${setBtnText}文件`}}</el-button>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data () {
    return {
      isShow: false,
      answerData: {},
      iploadULR: '',
      fileListV: [],
      fileList: [],
      sendAnswerLoading: false,
      finalAnswer: '',
      baseUrl: global.baseurl,
      isMyorder: {},
      isAnswer: false
    }
  },
  computed: {
    setBtnText () {
      if(this.isAnswer) {
        return '答复'
      } else {
        return '补正'
      }
    }
  },
  methods: {
    show(row) {
      if (row.status == '等待答复') {
        this.isAnswer = true
      } else {
        this.isAnswer = false
      }
      
      this.answerData = row
     
      this.isShow = true
      this.finalAnswer = row.id
      this.isMyorder = row.order.is_distribution
    },
    sendAnswerClose () {
      this.fileList = []
			this.fileListV = []
    },
    handleRemove(file, fileList) {
			this.fileListV = fileList
    },
    handleChange(file, fileList) {
      let tempList = [];//可以上传的文件
      let that = this;
      let canUpload = true;//是否可以上传
      let fileName,
          fileNameArr,
          arrLen,
          pos,
          lastName,
          orderNum =''
      for(let i = 0;i<fileList.length;i ++){
        // //验证文件类型
        fileName = fileList[i].name;
        pos = fileName.lastIndexOf(".")
        lastName = fileName.substring(pos, fileName.length)
        tempList.push(fileList[i])
      }
      this.fileListV.splice(0,this.fileListV.length,...tempList)
      fileList.splice(0, fileList.length,...tempList)
      return
    },
    uploadSectionFile(params) {

    },
    submitAnswerFile () {
      this.sendAnswerLoading = true
      let list = document.getElementsByClassName(
        "el-upload-list__item is-ready"
      );
      if (list.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择需要上传的文件！"
        });
        return
      }
      // FormData 对象
      let form = new FormData()
      // 文件对象
      form.append('finalAnswer', this.finalAnswer)
      form.append('file', this.fileListV[0].raw);
      let url = ''
      if (this.isMyorder == 3) {
        url = `/api/finals/${this.finalAnswer}/agent/my/answer`
      } else {
        url = `/api/finals/${this.finalAnswer}/agent/answer`
      }
      axios({
        method: "post",
        url: this.baseUrl + url,
        data: form,
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: "Bearer " + this.$store.state.token
        }
        }).then(res => {
        if (res.data.status == "success") {
          this.$message({
            type: "success",
            message: "上传答复文件成功"
          })
          this.sendAnswerLoading = false
          this.fileListV = []
          this.isShow = false
          this.$emit('refresh')
        } else {
          this.sendAnswerLoading = false
          this.$message({
            type: "error",
            message: res.data.message
          });
          this.fileListV = []
        }
      });
    },
  }
} 
</script>

<style lang='less'>
  .sendAnswer {

  }
</style>